﻿@model GuRenFang.Service.Entity.StatisticsData

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<div class="grid_16 widget first">
    <div class="widget_title clearfix">
        <h2>
            Google流量统计数据</h2>
       <ul>
            <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="@Url.Content("~/Management/Statistics/KeyWordsData")" >
                <span>【按搜索关键字统计】</span></a> </li>
            <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="@Url.Content("~/Management/Statistics/SourceData")" >
                <span>【按流量来源统计】</span></a> </li>
            <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="@Url.Content("~/Management/Statistics/BrowserData")" >
                <span>【按访问者浏览器统计】</span></a> </li>
            <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="@Url.Content("~/Management/Statistics/CityData")" >
                <span>【按访问者城市统计】</span></a> </li>
            <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="@Url.Content("~/Management/Statistics/ServiceProviderData")" >
                <span>【按访问者网络统计】</span></a> </li>

        </ul>
    </div>
    <div class="widget_body">
        <div class="fg-toolbar ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix">
            <div>
                从
                <input type="text" id="txtStartDay" class="datepicker" value="@ViewBag.StartDay" />
                至
                <input type="text" id="txtEndDay" class="datepicker" value="@ViewBag.EndDay" />
                <a class="btn medium" href="javascript:void(0)" id="btnQuery"><span>【查 询】</span></a>
            </div>
        </div>
        <table class="simple">
            <tbody>
                <tr class="odd">
                    <td>
                        访问数:
                    </td>
                    <td>
                        <b>@Model.Visits </b>(次)
                    </td>
                    <td rowspan="5" style="width: 400px; height: 200px; padding: 0px; ">
                        <div class="centered" style="width: 400px; height: 200px; position: relative;" id="interactive">
                        </div>
                    </td>
                </tr>
                <tr class="even">
                    <td>
                        浏览量:
                    </td>
                    <td>
                        <b>@Model.Pageviews </b>（页）
                    </td>
                </tr>
                <tr class="odd">
                    <td>
                        平均每次访问页数：
                    </td>
                    <td>
                        <b>@Model.AvgPageviews.ToString("f2") </b>(页/次)
                    </td>
                </tr>
                <tr class="even">
                    <td>
                        平均网站停留时间：
                    </td>
                    <td>
                        <b>@Model.AvgTimeOnSite.ToString("HH:mm:ss")</b>
                    </td>
                </tr>
                <tr class="odd">
                    <td>
                        跳出率:
                    </td>
                    <td>
                        <b>@Model.VisitBounceRate.ToString("f2")%</b>
                    </td>
                </tr>
                
               
                <tr class="even">                    
                    <td colspan="3" style="height: 30px;">
                     </td>
                </tr>
                <tr class="odd">
                    <td>
                        直接流量:
                    </td>
                    <td>
                        <b>@Model.FromDirect </b>(次), 占<b>@Model.PercentFromDirect.ToString("f2")% </b>
                    </td>
                    <td rowspan="4" style="width: 400px; height: 200px; padding: 0px;">
                        <div class="centered" style="width: 400px; height: 200px; position: relative;" id="TrafficSource">
                        </div>
                    </td>
                </tr>
                <tr class="even">
                    <td>
                        引荐流量:
                    </td>
                    <td>
                        <b>@Model.FromRecommand </b>(次), 占<b>@Model.PercentFromRecommand.ToString("f2")% </b>
                    </td>
                </tr>
                <tr class="odd">
                    <td>
                        搜索流量：
                    </td>
                    <td>
                        <b>@Model.FromSearchEngine </b>(次), 占<b>@Model.PercentFromSerchEngine.ToString("f2")% </b>
                    </td>
                </tr>
                <tr class="even">                    
                    <td colspan="2" style="height: 80px;">
                     </td>
                </tr>
               
            </tbody>
        </table>
    </div>
</div>
<div class="clear">
    <script type="text/javascript">
        google.load('visualization', '1.0', {'packages':['corechart']});
        google.setOnLoadCallback(drawChart);

        $(document).ready(function () {

            $.datepicker.setDefaults({              
               dateFormat:'yy-mm-dd',
               firstDay:1,
               nextText:"下月",
               prevText:"上月",
               dayNamesMin:['日', '一', '二', '三', '四', '五', '六'],
               monthNames:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
            });

            $("#txtStartDay").attr("readonly","readonly").datepicker({               
                maxDate:$("#txtEndDay").val(),
                onSelect:function(dateText, inst){
                    $('#txtEndDay').datepicker('option', 'minDate',dateText);
                }
            }) 
            $("#txtEndDay").attr("readonly","readonly").datepicker({
                maxDate:"@DateTime.Now.AddDays(-1).ToString("yyyy-MM-dd")",
                minDate:$("#txtStartDay").val(),
                onSelect: function(dateText, inst){
                    $('#txtStartDay').datepicker('option', 'maxDate',dateText);
                }
            })

            $("#btnQuery").click(function(){
             window.location.href="@Url.Content("~/Management/Statistics/default?startday=")" +encodeURIComponent($("#txtStartDay").val())+"&endday="+encodeURIComponent($("#txtEndDay").val()) ;
            
            })         

        });        

        function drawChart() {
            // Create the data table.
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'medium');
            data.addColumn('number', 'visits');
            data.addRows([
            ['直接流量', @Model.FromDirect],
            ['引荐流量', @Model.FromRecommand],
            ['搜索流量', @Model.FromSearchEngine]
            ]);
            var options = {'title':'流量来源-访问次数统计图',
                        'width':400,
                        'height':200};
            var chart = new google.visualization.PieChart(document.getElementById('TrafficSource'));
            chart.draw(data, options);


            data = new google.visualization.DataTable();
            data.addColumn('string', 'Visittype');
            data.addColumn('number', 'visits');
            data.addRows([
            ['新用户访问次数', @Model.NewVisits],
            ['老用户访问次数', @Model.ReturningVisits]
            ]);
          
            options = {'title':'用户类型-访问次数统计图',
                        'width':400,
                        'height':200};
            
            chart = new google.visualization.PieChart(document.getElementById('interactive'));
            chart.draw(data, options);
        }
    </script>
</div>
